// 一个黑色面板，指向左下角黄色连线
import {
  globalLayer,
  globalTool
} from '../BQGIS-globalVar'

const default1 = {
  title: '标签文字'
}

const default2 = {
  title: '标签文字',
  content: `<div class="data-li">
  <div class="data-label">实时流量：</div>
  <div class="data-value"><span id="lablLiuliang" class="label-num">39</span><span class="label-unit">m³/s</span>
  </div>
</div>
<div class="data-li">
  <div class="data-label">水池液位：</div>
  <div class="data-value"><span id="lablYeWei" class="label-num">10.22</span><span class="label-unit">m</span>
  </div>
</div>
<div class="data-li">
  <div class="data-label">水泵状态：</div>
  <div class="data-value">
      <span id="lablSBZT1" class="label-tag data-value-status-1" alt="中间状态">1号</span>
      <span id="lablSBZT2" class="label-tag data-value-status-0" alt="关闭状态">2号</span>
  </div>
</div>
<div class="data-li">
  <div class="data-label">出水阀门：</div>
  <div class="data-value">
      <span id="lablCSFM1" class="label-tag data-value-status-1" alt="中间状态">1号</span>
      <span id="lablCSFM2" class="label-tag data-value-status-2" alt="打开状态currentGraphic">2号</span>
  </div>
</div>`
}

export const defaultData = {
  blueGradientPanel: default1,
  blackPanel: default1,
  greenGradientPanel: default1,
  spotPanel: default1,
  redPanel: default2,
}

export const markList = [{
  label: 'blueGradientPanel',
  url: '/images/lable/1.png',
}, {
  label: 'blackPanel',
  url: '/images/lable/2.png',
}, {
  label: 'greenGradientPanel',
  url: '/images/lable/3.png',
}, {
  label: 'spotPanel',
  url: '/images/lable/9.png',
}, {
  label: 'redPanel',
  url: '/images/lable/5.png',
}]

export const marksMap = {
  blackPanel: function ({
    title = ''
  }) {
    return {
      type: "div",
      attr: {
        keys: ['title']
      },
      style: {
        html: `<div class="marsBlackPanel animation-spaceInDown">
                  <div class="marsBlackPanel-text" id="title">${title}</div>
              </div>`,
        offsetY: -66,
        offsetX: 15,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //   0,
        //   400000
        // ), // 按视距距离显示
        // 高亮时的样式
        highlight: {
          className: "marsBlackPanel-highlight",
        }
      }
    }
  },
  blueGradientPanel: function ({
    title = ''
  }) {
    return {
      type: "div",
      attr: {
        keys: ['title']
      },
      style: {
        offsetY: -77,
        html: `<div class="marsBlueGradientPnl" style="pointer-events: all">
              <div id="title">${title}</div>
          </div>`,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //     0,
        //     400000
        // ), // 按视距距离显示
      }
    }
  },
  greenGradientPanel: function ({
    title = ''
  }) {
    return {
      type: "div",
      attr: {
        keys: ['title']
      },
      style: {
        html: `<div class="marsGreenGradientPnl" style="pointer-events: all">
              <div id="title">${title}</div>
          </div>`,
        offsetY: -44,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //     0,
        //     400000
        // ), // 按视距距离显示
      }
    }
  },
  spotPanel: function ({
    title = ''
  }) {
    return {
      type: "div",
      attr: {
        keys: ['title']
      },
      style: {
        html: `<div class="mars-spot" style="pointer-events: all">
                  <div class="mars-spot-board">
                  <h5 id="title">${title}</h5>
                  </div>
                  <div class="mars-spot-line"></div>
              </div>`,
        offsetY: -34,
        offsetX: -30,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
      }
    }
  },
  redPanel: function ({
    title = '',
    content = ''
  }) {
    return {
      type: "div",
      attr: {
        keys: ['title', 'content']
      },
      style: {
        html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="pointer-events: all">
        <div class="marsTiltPanel-wrap">
            <div class="area">
                <div class="arrow-lt"></div>
                <div class="b-t"></div>
                <div class="b-r"></div>
                <div class="b-b"></div>
                <div class="b-l"></div>
                <div class="arrow-rb"></div>
                <div class="label-wrap">
                    <div class="title" id="title">${title}</div>
                    <div class="label-content" id="content">${content}</div>
                </div>
            </div>
            <div class="b-t-l"></div>
            <div class="b-b-r"></div>
        </div>
        <div class="arrow" ></div>
    </div>`,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      }
    }
  }
  // greenGif: function (imgData) {
  //   return {
  //     data: {
  //       imgData
  //     },
  //     option: {
  //       type: "div",
  //       style: {
  //         html: `<img src="${imgData?.url}" style=" width:${imgData?.width}px; height:${imgData?.height}px;" ></img>`,
  //         horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  //         // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
  //         //     0,
  //         //     400000
  //         // ), // 按视距距离显示
  //       }
  //     }
  //   }
  // },
}


export function startDrawGraphic(option, viewer = window.viewer) {
  return globalLayer.markLayer.startDraw(option)
}

export function getGraphicLayer(viewer) {
  if (!globalLayer.markLayer) {
    globalLayer.markLayer = new mars3d.layer.GraphicLayer({
      contextmenuItems: [{
          text: "修改位置",
          icon: "fa fa-edit",
          show: function (e) {
            const graphic = e.graphic
            if (!graphic || !graphic.hasEdit) {
              return false
            }
            return !graphic.isEditing
          },
          callback: (e) => {
            const graphic = e.graphic
            if (!graphic) {
              return false
            }
            if (graphic) {
              globalLayer.markLayer.startEditing(graphic)
            }
          }
        },
        {
          text: "修改标签文字",
          icon: "fa fa-edit",
          show: true,
          callback: (e) => {
            const graphic = e.graphic
            if (!graphic) {
              return false
            }
            globalTool.eventTarget.fire('editMarkGraphic', e)
          }
        },
        {
          text: "删除对象",
          icon: "fa fa-trash-o",
          show: (event) => {
            const graphic = event.graphic
            if (!graphic || graphic.isDestroy) {
              return false
            } else {
              return true
            }
          },
          callback: (e) => {
            const graphic = e.graphic
            if (!graphic) {
              return
            }
            graphic.stopEditing()
            globalLayer.markLayer.removeGraphic(graphic)
            globalTool.eventTarget.fire('endMarkGraphic', e)
          }
        }
      ]
    })
    viewer.addLayer(globalLayer.markLayer)
  }
  return globalLayer.markLayer
}

export function getDomData(graphic) {
  const dom = graphic.container;
  const obj = {}
  if (graphic.attr.keys.indexOf('title') !== -1) {
    const titleDom = dom.querySelector("#title")
    if (titleDom) {
      obj.title = titleDom.innerHTML || ''
    }
  }
  if (graphic.attr.keys.indexOf('content') !== -1) {
    const contentDom = dom.querySelector("#content")
    if (contentDom) {
      obj.content = contentDom.innerHTML || ''
    }
  }
  return obj
}

export function setDomTitle(graphic, data) {
  const dom = graphic.container;
  const titleDom = dom.querySelector("#title")
  titleDom.innerHTML = data
  graphic.setStyle({ // 不加的话，graphic的数据不会同步，导出文件的数据会不一致，目前mars3d的bug，后续更新可以测试更改
    html: graphic.html
  })
}

export function setDomContent(graphic, data) {
  const dom = graphic.container;
  const contentDom = dom.querySelector("#content")
  contentDom.innerHTML = data
  graphic.setStyle({ // 不加的话，graphic的数据不会同步，导出文件的数据会不一致，目前mars3d的bug，后续更新可以测试更改
    html: graphic.html
  })
}

export function getGeoJson() {
  return globalLayer.markLayer.toGeoJSON()
}

export function loadGeoJSON(geojson) {
  globalLayer.markLayer.loadGeoJSON(geojson)
}


export function download(content, filename) {
  const element = document.createElement('a');
  element.setAttribute('download', filename);
  element.style.display = 'none';
  // 字符内容转变成blob地址
  var blob = new Blob([JSON.stringify(content)]);
  element.href = URL.createObjectURL(blob);
  // 触发点击
  document.body.appendChild(element);
  element.click();
  // 然后移除
  document.body.removeChild(element);
};

export function getFileByJson(jsonString, fileName) {
  if (!jsonString) return
  const content = typeof jsonString == 'string' ? jsonString : JSON.stringify(jsonString)
  var blob = new Blob([content], {
    type: 'application/json'
  });
  let file = new File([blob], fileName, {
    type: 'application/json'
  })
  return file
}

export function getFileData(e) {
  return new Promise((resolve, reject) => {
    const files = e.target.files;
    if (!files || !files.length) return;
    const file = files[0];
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function () {
      resolve(reader.result)
    };
    reader.onerror = function () {
      reject()
    }
  })
}

export function clearLayer() {
  globalLayer.markLayer.clear(true)
}